<template>
		<!-- 用户列表 -->
		<up-skeleton title avatar :loading="props.loading" v-for="(user, index) in props.userList"
			:key="user.id">
			<up-card padding='0rpx' :foot-border-top="false" :head-border-bottom='false'
				style="background-color: #f6f8fa;">
				<template #body>
					<view class="" slot="body">

						<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0"
							style="position: relative;">
							<view class="gender">
								{{user.gender === 0?'男':'女'}}
							</view>
							<image
								:src="user.avatarUrl"
								mode="aspectFill" style="width: 300rpx;height: 300rpx;"></image>
							<view class="u-body-item-title u-line-2" style="margin: 8rpx;">
								<view>{{user.username}}</view>
								<view>{{user.userProfile}}</view>
								<up-tag plain size="mini" type="warning" v-for="tag in user.tags"
									style="margin: 8rpx;margin-left: 0rpx;">
									{{ tag }}
								</up-tag>
							</view>
						</view>
					</view>
				</template>
				<template #foot>
					<view
						style="display: flex; justify-content: flex-end; align-items: center; width: 20%;margin-left: auto;">
						<up-button @click="showPopup(index)">联系我</up-button>
					</view>
				</template>
			</up-card>
		</up-skeleton>

		<!-- 无符合用户 -->
		<!-- <up-empty v-if="!props.userList || props.userList.length < 1" text="无符合的用户" /> -->

		<!-- 弹出层 -->
		<up-popup :show="show" :round="10" mode="center" @close="close">
			<view style="padding: 100rpx;">
				<view style="margin-bottom: 16px;">
					<text style="font-weight: bold;">邮箱：</text>
					<text>{{ props.userList[userIndex]?.email || '保密' }}</text>
				</view>
				<view>
					<text style="font-weight: bold;">电话：</text>
					<text>{{ props.userList[userIndex]?.phone || '保密' }}</text>
				</view>
			</view>
		</up-popup>

</template>

<script setup lang="ts">
	import type { userType } from "@/models/user";
	import { onMounted, ref, watchEffect } from "vue";

	const show = ref(false)
	const userIndex = ref(0)

	interface UserCardListProps {
		loading : boolean
		userList : userType[];
	}

	const props = withDefaults(defineProps<UserCardListProps>(), {
		//@ts-ignore
		userList: [] as userType[],
	});
	//用户信息标签字符串化
	const loadDate = () => {
		console.log("userList" + props.userList)
		if (props.userList && props.userList.length === 0) {
			props.userList.push(
				{
					id: 1,
					username: "Alice",
					avatarUrl: "http://gips3.baidu.com/it/u=1022347589,1106887837&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
					gender: 1,
					userProfile: "Frontend Developer",
					tags: JSON.stringify(["JavaScript", "Vue", "HTML"]),
					email: "alice@example.com",
					phone: "1234567890"
				},
				{
					id: 2,
					username: "Bob",
					avatarUrl: "https://via.placeholder.com/100",
					gender: 0,
					userProfile: "Backend Developer",
					tags: JSON.stringify(["Node.js", "Python", "Database"]),
					email: "bob@example.com",
					phone: "9876543210"
				},
				{
					id: 3,
					username: "Carol",
					avatarUrl: "https://via.placeholder.com/100",
					gender: 1,
					userProfile: "UI/UX Designer",
					tags: JSON.stringify(["Figma", "Sketch", "Adobe XD"]),
					email: null,
					phone: null
				}
			);
		}
		if (props.userList) {
			props.userList.forEach((user : userType) => {
				if (user.tags) {
					user.tags = JSON.parse(user.tags);
				}
			})
		}
	}

	const showPopup = (index : number) => {
		show.value = true;
		userIndex.value = index
		console.log("d", index)
	}
	const close=()=>{
		show.value = false
	}
	watchEffect(() => {
		loadDate();
	})
</script>
<style scoped>
	.gender {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: 1;
		color: #fff;
		width: 50rpx;
		text-align: center;
		background-color: #1a8afc;
	}
</style>